<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>商品-钱包充值</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/app.css?a=1111"/>
</head>
<body class="isHide">
<div class="ft-wrap height top">
    <!--顶部悬浮导航-->
    <div class="ft-head-nav">
        <a class="ft-h-back" href="javascript:;">返回</a>
        <span class="ft-head-text">Recharge to the balance</span>
    </div>
    <!--中间滚动内容-->
    <div class="ft-container no-padding height background">
        <div class="ft-overflow">
            <div class="ft-module no-top no-mar slide-module">
                <div class="module-bd no-pad">
                    <div class="refund-form-module no-pad">
                        <div class="module-hd background">
                            <label>Recharge amount</label>
                        </div>
                        <div class="module-bd no-pad">
                            <label class="form-input">
                                <input type="text" placeholder="Refund amount" value="">
                            </label>
                        </div>
                        <div class="module-hd background">
                            <label>Recharge method</label>
                        </div>
                        <div class="module-bd no-pad">
                            <div class="wallet-filtrate box-list recharge-list">
                                <ul class="row-2">
                                    <li><a class="active" href="javascript:;"><img src="../img/recharge-method1.png"></a></li>
                                    <li><a class="" href="javascript:;"><img src="../img/recharge-method2.png"></a></li>
                                    <li><a class="" href="javascript:;"><img src="../img/recharge-method3.png"></a></li>
                                    <li><a class="" href="javascript:;"><img src="../img/recharge-method4.png"></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pad-all15 recharge-btn">
                <a class="ft-cart-btn none" href="#">Confirm recharge</a>
                <a class="ft-cart-btn active" href="#">Confirm recharge</a>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/jquery.lazyload.min.js"></script>
<script src="../js/ft-common.js"></script>
<script src="../js/pageScript.js"></script>
<script>
    $(function () {
        //上传图片
        $(window).resize(function () {
            var $upload = $(".upload-flies");
            var w_w = $(this).width() - 20 - 50;
            var cell_w = w_w / 5;
            $upload.find("li label").css({"width": cell_w + "px", "height": cell_w + "px"});
        }).trigger("resize");
        //上传图片之后处理返回图片的大小
        $("img.lazy").each(function () {
            var that = $(this);
            var w = that.width();
            var h = that.height();
            var ceil_w = Math.ceil(that.parents("label").width());
            var ceil_h = Math.ceil(that.parents("label").height());
            /**
             * 执行下面计算函数
             * this 当前上传的图片dom对象
             * ceil_w，ceil_h参考的父辈高宽，已获取到
             * w,h为图片的高宽，未加载完成的图片是获取不到的，
             * 上传完成之后，记录图片的高宽，替换w,h
             */
            common.setImageLayout(this, ceil_w, ceil_h, w, h);
        });

        //输入数量-限制输入
        $(document).on("change keyup", ".num-input input", function () {
            var tag = $(this).parent();
            var _val = $(this).val();
            if (_val >= Number(tag.data("max"))) {
                $(this).val(Number(tag.data("max")));
            } else if (_val <= Number(tag.data("min"))) {
                $(this).val(Number(tag.data("min")));
            }
        });

        //绑定减数量
        $(document).on("click", "a.num-cut", function () {
            var that = this;
            var tag = $(this).nextAll(".num-input");
            $(that).nextAll("a.num-add").removeClass('none');
            common.numberCalculate(tag, Number(tag.data("max")), Number(tag.data("min")), "cut", function (num) {
                if (num == 1) {
                    $(that).addClass("none");
                } else {
                    $(that).removeClass("none");
                }
            });
        });

        //绑定加数量
        $(document).on("click", "a.num-add", function () {
            var that = this;
            var tag = $(this).prevAll(".num-input");
            $(that).prevAll("a.num-cut").removeClass('none');
            common.numberCalculate(tag, Number(tag.data("max")), Number(tag.data("min")), "add", function (num, max) {
                if (num == max) {
                    $(that).addClass("none");
                } else {
                    $(that).removeClass("none");
                }
            });
        });

        //手风琴
        slideDownNav();

        //统计输入文字个数
        var $text = $(".form-text");
        var num = parseInt($text.find("span").text());
        $text.find("textarea").on("keyup", function () {
            var _val = $(this).val();
            var length = _val.length;
            if ((num - length) < 0) {
                $text.find("span").css("color", "red").text("beyond：" + (num - length));
            } else {
                $text.find("span").css("color", "#3c3c3c").text(num - length);
            }
        });
    })
</script>
</body>
</html>